<template>
  <div>
    <h1>购物车</h1>
    <el-table
    :data="productList"
    show-summary
    style="width: 100%">
    <!-- <el-table-column prop="pro_img" label="图片" width="300" height="300">
          <el-image src="../assets/images/pidai.png"/>
      </el-table-column> -->
    <!-- <el-table-column
      prop="pro_img"
      label="图片"
      width="300">
    </el-table-column> -->
    <el-table-column 
      prop="pro_name"
      label="名称">
    </el-table-column>
    <el-table-column
      prop="pro_num"
      label="数量">
    </el-table-column>
    <el-table-column
      prop="pro_price"
      sortable
      label="价格">
    </el-table-column>
  </el-table>
  <div class="button">
    <el-button @click="buyall()">清空购物车</el-button>
    <el-button @click="goshop()">继续购物</el-button>
 
  </div>
  </div>
  
</template>

<script>
export default {
    computed:{
      productList(){
        return this.$store.state.cartList;
      }
    },
    methods:{
        getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
        },
        buyall(){
        this.$store.dispatch('buy').then(this.$message({
          message: '清空购物车成功',
          type: 'success'
        }))
        },
        goshop(){
        this.$router.push({path:'/'})
        }
    },
}
</script>

<style>

</style>